<template>
  <!-- 侧边导航菜单，支持折叠 -->
  <el-menu
    :default-active="activeMenu"
    class="el-menu-vertical-demo navbar"
    :collapse="isCollapse"
    router
  >
    <el-menu-item v-for="(item, index) in menuData" :key="index" :index="item.path">
      <el-icon>
        <component :is="item.icon" />
      </el-icon>
      <template #title>{{ item.title }}</template>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
// 引入 vue 相关方法
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
// 引入 Element Plus 菜单相关组件
import { ElMenu, ElMenuItem, ElSubMenu, ElIcon, ElMenuItemGroup } from 'element-plus'
// 引入图标
import { HomeFilled, Memo, School, QuestionFilled, UserFilled, Trophy, Coin, Histogram } from '@element-plus/icons-vue'

// 父组件传递的折叠状态
const props = defineProps({
  isCollapse: Boolean,
})

// 当前激活菜单项
const route = useRoute()
const activeMenu = ref(route.path)

// 监听路由变化，更新 activeMenu
watch(() => route.path, (newPath) => {
  activeMenu.value = newPath
})

// 菜单数据结构，可扩展 children 实现多级菜单
const menuData = [
  {
    path: '/home',
    icon: HomeFilled,
    title: '首页',
  },
  {
    path: '/home/admission-policies',
    icon: Memo, // 招生政策
    title: '招生政策',
  },
  {
    path: '/home/campus-lives',
    icon: School, // 校园生活
    title: '校园生活',
  },
  {
    path: '/home/issues',
    icon: QuestionFilled, // 常见问题
    title: '常见问题',
  },
  {
    path: '/home/majors',
    icon: UserFilled, // 专业信息
    title: '专业信息',
  },
  {
    path: '/home/scholarships',
    icon: Trophy, // 奖学金
    title: '奖学金',
  },
  {
    path: '/home/tuition-fees',
    icon: Coin, // 学费信息
    title: '学费信息',
  },
  {
    path: '/home/qa-histories',
    icon: Histogram, // 问答历史与统计
    title: '问答历史与统计',
  },
]
</script>

<style scoped>
/* 展开时菜单宽度 */
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100%;         /* 填满父容器 */
  min-height: 0;        /* 防止撑开父容器 */
  overflow-y: auto;     /* 只让菜单滚动 */
}

/* 导航栏高度自适应 */
.navbar {
  height: 100%;
}

/* 极简浅灰色细滚动条 */
.el-menu-vertical-demo::-webkit-scrollbar {
  width: 6px;
  background: transparent;
}
.el-menu-vertical-demo::-webkit-scrollbar-thumb {
  background: #d3d3d3;
  border-radius: 0;
}
.el-menu-vertical-demo::-webkit-scrollbar-thumb:hover {
  background: #bdbdbd;
}
</style>